<template>
  <Teleport to="body">
    <transition name="fade">
      <div
        class="page-modal"
        :class="{
          'hide-side-bar': !sidebar.opened,
          'page-modal-close': showClose,
        }"
        v-if="modelValue"
      >
        <div
          class="page-content"
          :class="{
            'page-content--close': showClose,
            'page-content--footer': proxy.$slots.footer,
          }"
        >
          <div class="page-header" v-if="showClose">
            <div class="page-title">{{ title }}</div>
            <div class="page-close" @click="hide">
              <el-button>关闭</el-button>
            </div>
          </div>
          <div
            class="page-scroll"
            v-if="modelValue"
            :style="{ padding: padding + 'px' }"
          >
            <slot></slot>
          </div>
          <div class="page-footer" v-if="proxy.$slots.footer">
            <slot name="footer"></slot>
          </div>
        </div>
      </div>
    </transition>
  </Teleport>
</template>

<script setup name="PageModal">
import useAppStore from '@/store/modules/app'
const sidebar = computed(() => useAppStore().sidebar)
const emit = defineEmits(['update:modelValue'])
const { proxy } = getCurrentInstance()
const router = useRouter()

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  title: String,
  showClose: {
    type: Boolean,
    default: false,
  },
  padding: {
    type: Number,
    default: 0,
  },
})

// 监听当前路由
watch(
  () => router.currentRoute.value,
  (newValue) => {
    hide()
  },
  { immediate: true }
)

function show() {
  emit('update:modelValue', true)
}

function hide() {
  emit('update:modelValue', false)
}
</script>

<style lang="scss" scoped>
.page-modal {
  position: fixed;
  top: 138px;
  left: 218px;
  z-index: 999;
  width: calc(100% - 240px);
  padding-bottom: 20px;
  background-color: #f4f5f9;
  &.hide-side-bar {
    width: calc(100% - 104px);
    left: 79px;
  }
  .page-content {
    position: relative;
    background-color: #fff;
    border-radius: 20px;
    height: calc(100vh - 158px);
    box-sizing: border-box;
    &.page-content--close {
      padding-top: 45px;
    }
    &.page-content--footer {
      padding-bottom: 52px;
    }
  }
  .page-header {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px 8px;
    background: #2f6ac6;
    border-radius: 20px 20px 0 0;
    border-bottom: 1px solid #e2e2ee;

    .page-title {
      font-size: 16px;
      color: #fff;
    }
    .page-close {
      cursor: pointer;
      font-size: 20px;
    }
  }
  .page-scroll {
    height: 100%;
    overflow-y: auto;
    border-radius: 20px;
  }
  .page-footer {
    width: 100%;
    position: absolute;
    bottom: 0;
    padding: 10px 20px;
    text-align: right;
    background: #fff;
    border-radius: 0 0 20px 20px;
    box-shadow: 0px -4px 10px 0px rgba(0, 0, 0, 0.05);
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
